<template>
  <view class="add-address-container">
    <nav-bar></nav-bar>
    <!-- <map class="map" :latitude="latitude" :longitude="longitude"> </map> -->
    <map class="map"> </map>
    <u--form
      labelPosition="left"
      labelWidth="30"
      :model="model"
      ref="formRef"
      :rules="rules"
    >
      <u-form-item leftIcon="account" prop="addressInfo.name" ref="item1">
        <u--input
          v-model="model.addressInfo.name"
          placeholder="收货人姓名"
          border="none"
        ></u--input>
      </u-form-item>
      <u-form-item leftIcon="phone" prop="addressInfo.phone" ref="item1">
        <u--input
          v-model="model.addressInfo.phone"
          placeholder="手机号"
          border="none"
        ></u--input>
      </u-form-item>
      <u-form-item leftIcon="map" prop="addressInfo.city" ref="item1">
        <u--input
          v-model="model.addressInfo.city"
          placeholder="所在省"
          border="none"
        ></u--input>
      </u-form-item>
      <u-form-item leftIcon="map" prop="addressInfo.region" ref="item1">
        <u--input
          v-model="model.addressInfo.region"
          placeholder="所在区"
          border="none"
        ></u--input>
      </u-form-item>
      <u-form-item leftIcon="map" prop="addressInfo.detailAddress" ref="item1">
        <u--input
          v-model="model.addressInfo.detailAddress"
          placeholder="详细地址"
          border="none"
        ></u--input>
      </u-form-item>
      <button class="sub-btn" @click="subForm">保存并使用</button>
    </u--form>
  </view>
</template>

<script>
import { mapState } from 'vuex'
export default {
  data() {
    return {
      latitude: 39,
      longitude: 116,
      type: -1, // 类型，1表示编辑，0表新增
      model: {
        addressInfo: {
          phone: '',
          name: '',
          city: '',
          region: '',
          detailAddress: '',
        },
      }, // 收货地址信息
      // 校验规则
      rules: {
        'addressInfo.name': {
          type: 'string',
          required: true,
          message: '请填写姓名',
          trigger: ['blur', 'change'],
        },
        'addressInfo.phone': {
          type: 'string',
          required: true,
          len: 11,
          message: '请填写11位手机号',
          trigger: ['blur'],
        },
        'addressInfo.city': {
          type: 'string',
          required: true,
          message: '请填写所在省',
          trigger: ['blur', 'change'],
        },
        'addressInfo.region': {
          type: 'string',
          required: true,
          message: '请填写所在区',
          trigger: ['blur', 'change'],
        },
        'addressInfo.detailAddress': {
          type: 'string',
          required: true,
          message: '请填写详细地址',
          trigger: ['blur', 'change'],
        },
      },
    }
  },
  computed: {
    ...mapState('user', ['userInfo']),
  },
  methods: {
    getLoaction() {
      uni.getLocation({
        type: 'wgs84',
        success: function (res) {
          console.log('当前位置的经度：' + res.longitude)
          console.log('当前位置的纬度：' + res.latitude)
        },
      })
    },
    // 提交表单
    async subForm() {
      const validateResult = await this.$refs.formRef.validate()
      // 验证通过
      if (validateResult) {
        const { userInfo, model } = this
        model.addressInfo.isUser = true
        if (this.type === '1') {
          const body = {
            name: model.addressInfo.name,
            phone: model.addressInfo.phone,
            city: model.addressInfo.city,
            region: model.addressInfo.region,
            detailAddress: model.addressInfo.detailAddress,
            objectId: model.addressInfo.objectId,
            isUser: true,
          }
          this.$store.dispatch('address/EditAddress', body)
        } else {
          model.addressInfo.userId = userInfo.objectId
          model.addressInfo.isCheck = false
          model.addressInfo.isDefault = false
          this.$store.dispatch('address/AddAddress', model.addressInfo)
        }
      }
    },
    // 根据id获取地址信息
    async getAddressInfo(id) {
      try {
        const addressInfoData = await this.$get('/1.1/classes/address/' + id)
        this.model.addressInfo = addressInfoData
      } catch (e) {
        uni.showToast({
          title: e.message,
          duration: 2000,
          icon: 'none',
        })
        console.log(e)
      }
    },
  },
  onLoad(options) {
    const { id, type } = options
    this.type = type
    // 编辑，发请求拿当前地址信息
    if (type === '1') {
      this.getAddressInfo(id)
    }
    this.getLoaction()
  },
}
</script>

<style lang="scss">
.map {
  width: 100%;
  height: 35vh;
}
.u-form-item {
  padding: 0 40rpx;
}
.sub-btn {
  width: 300rpx;
  height: 100rpx;
  margin-top: 60rpx;
  background-color: $lxins-color-yellow;
  border-radius: 20rpx;
  color: #fff;
  font-size: $lxins-fs-16;
  text-align: center;
  line-height: 100rpx;
}
</style>
